<template>
  <div class="userInfo-box">
    <Head :title= "title"></Head>
    <div class="userInfo-center">
      <p>
        <label>姓</label>
        <input type="text" v-model="firstName" placeholder="请使用证件上姓名拼音填写">
      </p>
      <p>
        <label>名</label>
        <input type="text" v-model="lastName" placeholder="请使用证件上姓名拼音填写">
      </p>
      <p>
        <label>中文姓名</label>
        <input type="text" v-model="chineseName" placeholder="请使用证件一致的姓名">
      </p>
      <p>
        <label>电子邮箱</label>
        <input type="text" v-model="eMail" placeholder="请输入电子邮箱">
      </p>
      <p>
        <label>联系电话</label>
        <span>18710128282</span>
      </p>
      <p class="userInfo-city">
        <label>国家</label>
        <input type="text" placeholder="请选择您的户籍地址">
      </p>
      <p>
        <label>地址</label>
        <input type="text" placeholder="请与您有效证件地址一致">
      </p>
      <p>
        <label>邮编</label>
        <input type="text" placeholder="请输入您居住地邮政编码">
      </p>
      <p>
        <label>证件类型</label>
        <span>身份证</span>
      </p>
      <p>
        <label>证件号码</label>
        <input type="text" v-model="IDNumber" placeholder="请输入您的身份证号码">
      </p>
      <div class="uploadImg">
        <img src="../../assets/images/idCard-positive.png" alt="">
        <img src="../../assets/images/idCard-otherSide.png" alt="">
      </div>
    </div>
    <div class="withdraw-btn" @click="checkForm(firstName,lastName,chineseName,eMail,'','',type)">
      <p>下一步</p>
    </div>
  </div>
</template>

<script>
  import { Ajax } from "@/mixins";
  import Head from '../../components/header/head.vue'

  export default {
     mixins: [Ajax],
    components: {
      Head
    },
    data() {
      return {
        title: '完善个人信息',
        firstName: '',
        lastName: '',
        chineseName: '',
        eMail: '',
        IDNumber: '',
        type: 1    //个人信息
      };
    },
    methods: {

    }
  };
</script>

<style scoped>
@import "../../style/withdrawInput.css";
.userInfo-center{
  padding:.8rem 0 .4rem;
}
.userInfo-center > p{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:0 .53rem;
  height:1.4rem;
}
.userInfo-center > p label{
  font-size:.48rem;
  color: #666;
  height:.8rem;
}
.userInfo-center > p span,.userInfo-center p input{
  width:8.9rem;
  height:.8rem;
  line-height: .8rem;
  font-size: .48rem;
  padding:0 .3rem;
  display: inline-block;
}
.userInfo-center > p input{
  border-bottom:.03rem solid #ede9f5;
  font-size: .36rem;
}
.userInfo-center > p input:focus{
  border-color: #8e79c0;
}
.userInfo-city input{
  background: url("../../assets/images/icon-right.png") no-repeat right center/.23rem .4rem;
}
</style>
